Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(CustomSelect): Fix input focus on arrow click on touch device #7816

Conversation

andrey-medvedev-vk
Copy link
Contributor

@andrey-medvedev-vk andrey-medvedev-vk commented Oct 23, 2024

  • Release notes

Описание

На touch устройстве не работает фокус на input при клике в зоне инпута ближе к стрелочке. Фокус есть на обертке, но сам инпут фокуса не имеет и клавиатура не появляется, как при клике на сам инпут, ближе к левому краю.
Воспроизводится в симуляторе Iphone и на реальном устройстве.

Дело в том, что не во всей видимой области инпута событие клика принимает input, и чтобы это победить мы программно вызываем фокус на инпуте.

Изначально, в #6087, а конкретно в 0f45bb9 это было реализовано с помощью отложенного вызова фокуса для кнопки очистки, а потом функция с отложенным фокусом перекочевала и на остальной новый код.

Объяснялось это тем, что без таймаута фокус просто не работал при клике на clear button.
Финальный код был сложнее, чем тот, когда этот отложенный фокус был добавлен, и он уже мог работать без отложенного вызова фокуса.

Протестировал в браузере и в симуляторе Iphone.

Изменения

Убран отложенный вызов фокуса на инпуте с помощью setTimeout.
Это исправляет фокус как при клике на стрелочку, так и при клике на clearButton.

Release notes

Исправления

  • CustomSelect: для touch устройств исправлен фокус на инпуте при клике на CustomSelect ближе к правому краю, в районе стрелки.

On touch device delayed focus implementation
was not working.
Turned out delayed focus is not neeaded anymore,
it works well on pointer and touch devices without
delay.
Copy link

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Copy link
Contributor

github-actions bot commented Oct 23, 2024

size-limit report 📦

Path Size
JS 380.64 KB (-0.05% 🔽)
JS (gzip) 115.4 KB (-0.05% 🔽)
JS (brotli) 94.93 KB (-0.07% 🔽)
JS import Div (tree shaking) 1.46 KB (0%)
CSS 332.15 KB (0%)
CSS (gzip) 42.09 KB (0%)
CSS (brotli) 33.18 KB (0%)

Copy link
Contributor

e2e tests

Playwright Report

Copy link
Contributor

github-actions bot commented Oct 23, 2024

👀 Docs deployed

Commit 9e77da5

Copy link

codecov bot commented Oct 23, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.14%. Comparing base (74715c7) to head (9e77da5).
Report is 7 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #7816      +/-   ##
==========================================
+ Coverage   95.12%   95.14%   +0.01%     
==========================================
  Files         376      376              
  Lines       11086    11092       +6     
  Branches     3682     3692      +10     
==========================================
+ Hits        10546    10553       +7     
+ Misses        540      539       -1     
Flag Coverage Δ
unittests 95.14% <100.00%> (+0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@andrey-medvedev-vk andrey-medvedev-vk self-assigned this Oct 23, 2024
@andrey-medvedev-vk andrey-medvedev-vk added this to the v6.7.3 milestone Oct 23, 2024
@andrey-medvedev-vk andrey-medvedev-vk marked this pull request as ready for review October 23, 2024 13:26
@andrey-medvedev-vk andrey-medvedev-vk requested a review from a team as a code owner October 23, 2024 13:26
Copy link
Contributor

@inomdzhon inomdzhon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✨✨✨

@inomdzhon inomdzhon added v6 Автоматизация: PR продублируется в ветку v6 patch Автоматизация: PR продублируется в ветку последнего минорного релиза для выпуска патча labels Oct 23, 2024
@inomdzhon
Copy link
Contributor

Добавил лейблы v6 и patch, но конфликта скорей всего не избежать, т.к. в JS правили типы и названия стилей

@andrey-medvedev-vk andrey-medvedev-vk merged commit bc35b0a into master Oct 24, 2024
53 checks passed
@andrey-medvedev-vk andrey-medvedev-vk deleted the mendrew/fix-custom-select-input-area-focus-on-touch-dev branch October 24, 2024 08:21
@vkcom-publisher
Copy link
Contributor

❌ Patch

Не удалось автоматически применить исправление на ветке 7.0-stable.

Дальнейшие действия выполняют контрибьютеры из группы @VKCOM/vkui-core

Чтобы изменение попало в ветку 7.0-stable, выполните следующие действия:

  1. Создайте новую ветку от 7.0-stable и примените изменения используя cherry-pick
git stash # опционально
git fetch origin 7.0-stable
git checkout -b patch/pr7816 origin/7.0-stable

git cherry-pick --no-commit bc35b0a4d9b2d9bfb564c28196eafc25dba9f838
git checkout HEAD **/__image_snapshots__/*.png
git diff --quiet HEAD || git commit --no-verify --no-edit
  1. Исправьте конфликты, следуя инструкциям из терминала
  2. Отправьте ветку на GitHub и создайте новый PR с веткой 7.0-stable (установка лейбла не требуется!)
git push --set-upstream origin patch/pr7816
gh pr create --base 7.0-stable --title "patch: pr7816" --body "- patch #7816"

vkcom-publisher pushed a commit that referenced this pull request Oct 24, 2024
)

На touch устройстве не работает фокус на input при клике в зоне инпута ближе к стрелочке. Фокус есть на обертке, но сам инпут фокуса не имеет и клавиатура не появляется, как при клике на сам инпут, ближе к левому краю.
Воспроизводится в симуляторе Iphone и на реальном устройстве.

Дело в том, что не во всей видимой области инпута событие клика принимает input, и чтобы это победить мы программно вызываем фокус на инпуте.

Изначально, в #6087, а конкретно в 0f45bb9 это было реализовано с помощью отложенного вызова фокуса для кнопки очистки, а потом функция с отложенным фокусом перекочевала и на остальной новый код.

Объяснялось это тем, что без таймаута фокус просто не работал при клике на clear button.
Финальный код был сложнее, чем тот, когда этот отложенный фокус был добавлен, и он уже мог работать без отложенного вызова фокуса.

Протестировал в браузере и в симуляторе Iphone.
@andrey-medvedev-vk
Copy link
Contributor Author

В 7.0-stable вроде как нету смысла вливать патч, так как v7 ещё нет.
Сделаю patch pr в 6.7-stable

andrey-medvedev-vk added a commit that referenced this pull request Oct 24, 2024
…7816)

На touch устройстве не работает фокус на input при клике в зоне инпута ближе к стрелочке. Фокус есть на обертке, но сам инпут фокуса не имеет и клавиатура не появляется, как при клике на сам инпут, ближе к левому краю.
Воспроизводится в симуляторе Iphone и на реальном устройстве.

Дело в том, что не во всей видимой области инпута событие клика принимает input, и чтобы это победить мы программно вызываем фокус на инпуте.

Изначально, в #6087, а конкретно в 0f45bb9 это было реализовано с помощью отложенного вызова фокуса для кнопки очистки, а потом функция с отложенным фокусом перекочевала и на остальной новый код.

Объяснялось это тем, что без таймаута фокус просто не работал при клике на clear button.
Финальный код был сложнее, чем тот, когда этот отложенный фокус был добавлен, и он уже мог работать без отложенного вызова фокуса.

Протестировал в браузере и в симуляторе Iphone.
andrey-medvedev-vk added a commit that referenced this pull request Oct 24, 2024
…7816) (#7825)

На touch устройстве не работает фокус на input при клике в зоне инпута ближе к стрелочке. Фокус есть на обертке, но сам инпут фокуса не имеет и клавиатура не появляется, как при клике на сам инпут, ближе к левому краю.
Воспроизводится в симуляторе Iphone и на реальном устройстве.

Дело в том, что не во всей видимой области инпута событие клика принимает input, и чтобы это победить мы программно вызываем фокус на инпуте.

Изначально, в #6087, а конкретно в 0f45bb9 это было реализовано с помощью отложенного вызова фокуса для кнопки очистки, а потом функция с отложенным фокусом перекочевала и на остальной новый код.

Объяснялось это тем, что без таймаута фокус просто не работал при клике на clear button.
Финальный код был сложнее, чем тот, когда этот отложенный фокус был добавлен, и он уже мог работать без отложенного вызова фокуса.

Протестировал в браузере и в симуляторе Iphone.
@vkcom-publisher
Copy link
Contributor

v6.7.3 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
cmp:custom-select patch Автоматизация: PR продублируется в ветку последнего минорного релиза для выпуска патча type:bug v6 Автоматизация: PR продублируется в ветку v6
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

4 participants